<!-- 表单催收 -->
<template>
    <div id="myMain">
        <div class="myMain-padding picture-main displayFlexR">
            <div class="left boxShadow paddingSize">
                <p class="baseBG" style="padding: 10px;">全部表数据</p>
                <el-tree
                :data="treeData"
                :props="defaultProps"
                accordion
                node-key="id"
                :default-expanded-keys="[1]"
                :current-node-key="2"
                :expand-on-click-node="false"
                :default-expand-all="true"
                @node-click="classification">
                <span class="custom-tree-node" slot-scope="{ data }" style="width: 100%;line-height: 20px;">
                    <span>{{ data.name }}</span>
                    <!-- <span @click="classification(data)">{{ data.name }}</span>
                    <span v-if="data.children" class="fr">
                    </span> -->
                </span>
                </el-tree>
            </div>
            <div class="right paddingSize displayFlexC" style="    flex: 1;">
                <vxe-table
                ref="xTable"
                :filter-config="{showIcon: false}"
                border
                stripe
                highlight-hover-row
                :data="tableData"
                :export-config="{}"
                row-id="id"
                :seq-config="{startIndex: (tablePage.currentPage - 1) * tablePage.pageSize}">
                <vxe-table-column type="checkbox" width="60"></vxe-table-column>
                <vxe-table-column type="seq" title="序号" width="100"></vxe-table-column>
                <!-- <vxe-table-column field="status" title="状态" width="150">
                    <template #default="{ row }">
                        <el-switch v-model="row.status" :active-value="1" :inactive-value="0" :width="30" @change="changeEvent(data)"></el-switch>
                    </template>
                </vxe-table-column> -->
                <vxe-table-colgroup title="表单名称">
                    <vxe-table-column field="tableName" :filters="[{data: ''}]" :filter-method="customStringFilterMethod" width="250">
                        <template #header="{ column }">
                            <vxe-input type="text" v-for="(option, index) in column.filters" :key="index" v-model="option.data" @change="filterEvent(option)" placeholder="请输入" clearable prefix-icon="el-icon-search"></vxe-input>
                        </template>
                    </vxe-table-column>
                </vxe-table-colgroup>
                <vxe-table-colgroup title="企业名称">
                    <vxe-table-column field="fname" :filters="[{data: ''}]" :filter-method="customStringFilterMethod" width="250">
                        <template #header="{ column }">
                            <vxe-input type="text" v-for="(option, index) in column.filters" :key="index" v-model="option.data" @change="filterEvent(option)" placeholder="请输入" clearable prefix-icon="el-icon-search"></vxe-input>
                        </template>
                    </vxe-table-column>
                </vxe-table-colgroup>
                <vxe-table-colgroup title="企业法人">
                    <vxe-table-column field="corp" :filters="[{data: ''}]" :filter-method="customStringFilterMethod" width="250">
                        <template #header="{ column }">
                            <vxe-input type="text" v-for="(option, index) in column.filters" :key="index" v-model="option.data" @change="filterEvent(option)" placeholder="请输入" clearable prefix-icon="el-icon-search"></vxe-input>
                        </template>
                    </vxe-table-column>
                </vxe-table-colgroup>
                <vxe-table-colgroup title="联系电话">
                    <vxe-table-column field="phone" :filters="[{data: ''}]" :filter-method="customStringFilterMethod" width="250">
                        <template #header="{ column }">
                            <vxe-input type="text" v-for="(option, index) in column.filters" :key="index" v-model="option.data" @change="filterEvent(option)" placeholder="请输入" clearable prefix-icon="el-icon-search"></vxe-input>
                        </template>
                    </vxe-table-column>
                </vxe-table-colgroup>
                <vxe-table-column field="paTime" title="填报时间" show-overflow width="150">
                    <template #default="{ row }">
                        <span v-if="row.paTime == null">无</span>
                        <span>{{row.paTime}}</span>
                    </template>
                </vxe-table-column>
                <vxe-table-column title="操作" width="100" fixed="right">
                    <template #default="{ row }">
                        <vxe-button type="text" title="催收" class="my_primary_btn" @click="urge(row)">催收</vxe-button>
                    </template>
                </vxe-table-column>
                </vxe-table>
                <!-- 分页 -->
                <vxe-pager
                perfect
                size="mini"
                :current-page="tablePage.currentPage"
                :page-size="tablePage.pageSize"
                :page-sizes="tablePage.pageSizes"
                :total="tablePage.totalResult"
                @page-change="pageChange"
                :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Total']">
                </vxe-pager>
            </div>
        </div>
    </div>
</template>
<style lang="scss" scoped>
@import '../../styles/all.scss';
</style>
<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import XEUtils from 'xe-utils'
import { getFormClassificationByStatus, getUrgeInfoById, putUrgeById } from '@/api/Data_filling'
export default {
//import引入的组件需要注入到对象中才能使用
components: {},
data() {
//这里存放数据
return {
    loading: false,
    tableData: [],
    list: [
        {
            formName: null,
            fname:null,
            corp:null,
            phone: null,
            time: null
        }
    ],
    // 分页
    tablePage: {
        currentPage: 1,
        pageSize: 10,
        pageSizes: [10, 20, 30, 40],
        totalResult: 0
    },
    // 树形控件
    treeData: [],
    defaultProps: {
        children: 'children',
        name: 'name'
    },
    rowDataId: 2
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
    // 表内查找
    customStringFilterMethod ({ option, row, column }) {
        if (option.data) {
        return XEUtils.toValueString(row[column.property]).toLowerCase().indexOf((option.data).toLowerCase()) > -1
        }
        return true
    },
    filterEvent (option) {
        const xTable = this.$refs.xTable
        // 设置为选中状态
        option.checked = true
        // 修改条件之后，需要手动调用 updateData 处理表格数据
        xTable.updateData()
    },
    // 根据页切换
    pageChange(val){
        console.log('page val', val)
        this.tablePage.currentPage = val.currentPage
        let page = val.currentPage
        let limit = val.pageSize
        this.getTableInfo(page, limit, this.rowDataId)
    },
    // 改变状态
    // changeEvent(row){},
    // get form classification
    getForm(){
        getFormClassificationByStatus(1).then(res => {
            console.log("form classification", res)
            this.treeData = res.data
        })
    },
    // 默认查询
    getTableInfo(page, limit, id){
        getUrgeInfoById(page, limit, id).then(res => {
            console.log("催收表数据", res)
            this.list = res.data
            this.tableData = res.data
            this.tablePage.totalResult = res.count
        })
    },
    // 根据分类筛选表内容
    classification(rowData){
        console.log('row data', rowData)
        if(rowData.fatherId == null){
            // 一级
            this.$XModal.message({ message: '请选择二级表名！', status: 'info' })
        }else{
            // 二级
            this.rowDataId = rowData.id
            this.tablePage.currentPage = 1
            this.getTableInfo(this.tablePage.currentPage, this.tablePage.pageSize, rowData.id)
        }
    },
    urge(data){
        this.$confirm('是否催收？', '', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            console.log("urge data", data)
            putUrgeById(this.rowDataId, data.firmId).then(res => {
                console.log("success res", res)
                this.$XModal.message({ message: '催收操作成功！', status: 'success' })
            })
        })
    }
},
//生命周期 - 创建完成（可以访问当前this实例）
created() {

},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {
    this.getForm()
    this.getTableInfo(this.tablePage.currentPage, this.tablePage.pageSize, 2)
},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类

</style>